<template>
  <div class="Echarts">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
export default {
  name: 'Echarts',
  data() {
    return {
      qqq:'0.2%',
    }
  },
  methods:{
	  myEcharts(){
		  // 基于准备好的dom，初始化echarts实例
		  var myChart = this.$echarts.init(document.getElementById('main'));
		  // 指定图表的配置项和数据
		  var option = {
			   title: {
			          text: '主标题',
			          subtext: '子标题',
			          left: 'center'
			      },
			      tooltip: {
			          trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'      //显示比例
			      },
			      legend: {                      //图例组件
			          orient: 'vertical',
			          left: 'left',
                bottom:'100px'
			      },

			      series: [
			          {
			              name: '访问来源',
			              type: 'pie',
			              radius: '70%',      //饼状图大小
			              data: [
			                  {value:this.qqq, name: '新车销量'},
			                  {value: 0.25, name: '城区交付数量'},
			                  {value: 0.30, name: '城郊交付数量'},
			                  {value: 0.40, name: '区域外交付数量'},
                        {value: 0.10, name: '展厅留档量'},
			                  {value: 0.5, name: '展厅线索量'}
			              ],
			              emphasis: {
			                  itemStyle: {
			                      shadowBlur: 10,
			                      shadowOffsetX: 0,
			                      shadowColor: 'rgba(0, 0, 0, 0.5)'
			                  }
			              }
			          }
			      ]
		  };

		  // 使用刚指定的配置项和数据显示图表。
		  myChart.setOption(option);
		  }
  },
  mounted() {
  	this.myEcharts();
  }
}
</script>

<style>

</style>
